<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
  <select>
    <option>省份</option>
    <option value="0">河北</option>
    <option value="1">山东</option>
    <option value="2">河南</option>
  </select>
  <select>
    <option>城市</option>
  </select>
  <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
  <script type="text/javascript">
			var arr = [ [ "秦皇岛", "唐山", "石家庄" ], [ "青岛", "烟台", "济南" ],
					[ "郑州", "洛阳", "焦作" ] ];
			//给第一个下拉选添加值改变事件
			$("select:first").change(function() {
				//将之前选择的城市信息清除掉(覆盖掉)
				$("select:last").html("<option>城市</option>");
				
				//得到点击省份对应的城市信息
				var cities = arr[this.value];
				//得到数组就遍历
				for (var i = 0; i < cities.length; i++) {
					//创建option对象
					var opt = $("<option></option>");
					var cityName = cities[i];
					//把城市名称放到option中
					opt.text(cityName);
					//添加到第二个下拉选里面
					$("select:last").append(opt);
				}
			});
		</script>
</body>
</html>